import React from 'react';
import Slider from '../../components/slider';
import RecommendList from '../../components/list';
import Scroll from '../../baseUI/scroll';
import {Content} from './style';
import * as actionTypes from './store/actionCreator';
import { connect } from 'react-redux';
import { useEffect } from 'react';
import { forceCheck } from 'react-lazyload';
import Loading from '../../baseUI/Loading';

function Recommend(props) {
  const { bannerList, recommendList, enterLoading } = props;
  const { getBannerDataDispatch, getRecommendListDataDispatch } = props;

  useEffect(() => {
    console.log(bannerList.size);
    // 如果页面有数据，则不发送请求
    if(!bannerList.size) {
      getBannerDataDispatch();
    }
    if(!recommendList.size) {
      getRecommendListDataDispatch();
    }
  }, []);

  const bannerListJS = bannerList ? bannerList.toJS() : [];
  const recommendListJS = recommendList ? recommendList.toJS() : [];

  return (
    <Content>
      <Scroll className="list" onScroll={forceCheck}>
        <div>
          <Slider bannerList={bannerListJS}></Slider>
          <RecommendList recommendList={recommendListJS}></RecommendList>
        </div>
      </Scroll>
      { enterLoading ? <Loading></Loading> : null}
    </Content>
  );
}

// 映射 Redux 全局的state 到组件的 props 上
// const mapStateToProps = (state) => ({
//   // 不要在这里将数据 toJS
//   // 不然每次 diff 比对 props 的时候都是不一样的应用，还是导致不必要的重渲染，属于滥用immutable
//   bannerList: state.getIn(['recommend', 'bannerList']),
//   recommendList: state.getIn(['recommend', 'recommendList'])
// });
const mapStateToProps = (state) => {
  console.log(state);
  return {
    // 不要在这里将数据 toJS
    // 不然每次 diff 比对 props 的时候都是不一样的应用，还是导致不必要的重渲染，属于滥用immutable
    bannerList: state.recommend.get('bannerList'),
    recommendList: state.recommend.get('recommendList'),
    enterLoading: state.recommend.get('enterLoading')
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    getBannerDataDispatch() {
      dispatch(actionTypes.getBannerList());
    },
    getRecommendListDataDispatch() {
      dispatch(actionTypes.getRecommendList());
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Recommend));